<template>
    <div>
        <Header></Header>
        <Banner title="新闻中心" p_url="http://hughspartan.top/blog/images/hello.jpg"></Banner>
    <div class="middle">
	<div class="line">我们的新闻</div>

	<div id="first-new">
		<img id="first-new-img"  src="../assets/img/1.jpeg">
		<span>
			持续资助医务工作者，北京字节跳动抗疫捐助超12亿元
		</span>
		<p>自2020年新冠疫情爆发以来，包括医务基金在内，北京字节跳动抗疫捐助累计超12亿元.</p>
	</div>
	<ul>
		<a href="#">
			<li class="co">
				<img class="new-img" src="../assets/img/pro-info2.jpg">
				<div class="new-container" >
					<span class="new-title">抖音宣布14岁以下实名用户将直接进入青少年模式</span>
					<span class="new-date">2021年5月26日</span>
					<p>
						物流公司的主要成本之一便是车辆。各家汽车制造厂商生产的车辆，
						性能各不相同。我们公司，通过对每一辆车的监控，通过后台数据分析，能够计算出每款车型的出勤率高低。
					</p>
				</div>
			</li>
		</a>
		<a href="#">
			<li class="co">
				<img class="new-img" src="../assets/img/pro-info3.jpg">
				<div class="new-container" >
					<span class="new-title">驰援云南漾濞，北京字节跳动联合壹基金建立灾后儿童服务站</span>
					<span class="new-date">2021年5月23日</span>
					<p>
						5月21日晚间，云南漾濞发生多次地震，最高6.4级。5月22日下午，
						北京字节跳动公司联合壹基金宣布，在当地安置点建立“益童乐园灾后儿童服务站”。
					</p>
				</div>
			</li>
		</a>
	</ul>

</div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from './header.vue'
import Footer from './footer.vue'
import Banner from './banner.vue'
export default {
    components:{
        Header,
        Footer,
        Banner
    }
}
</script>
<style scoped>
    ul li {
        list-style: none;
    }
    .line{
        height:100px;
		width:100%;
		line-height:100px;
		background:white;
		text-align: center;
		font-size:40px;
		font-weight:600;
	}
    .t-fill{
        height:20px;
        width:200px;
        margin:0px auto 0px auto;
    }
    .t-img{
        height:50px;
        width:200px;
        border:4px solid black;
        background:white;
        opacity:0.5;
        margin:40px auto 0px auto;
    }
    .t-img{
        text-align:center;
        line-height:50px;
        
    }
    .t-img span{
        font-size:30px;
        font-weight:600;
    }

    #first-new{
        margin:40px auto 40px auto;
        width:70%;
        height:auto;
        text-align:center;
    }
    #first-new-img{
        width:100%;
        height:500px;
    }
    #first-new>span{
        font-size:35px;
        font-weight:600;
        color:#1557fe;
        text-align:left;
    }
    #first-new>p{
        font-size:25px;
        font-weight:500;
        color:grey;
        text-align:left;
    }
    .middle>ul{
        margin:40px auto 40px auto;
        width:70%;
        height:auto;
    }
    .middle>ul>a>li{
        width:100%;
        height:250px;
        margin:30px 0px 30px 0px;

    }
    .new-img{
        float:right;
        height:250px;
        width:40%;
    }
    .new-container{
        float:left;
        height:250px;
        width:51%;
    }
    .new-container>p{
        line-height:30px;
    }
    .new-title{
        font-size:25px;
        font-weight:600;
        color:#1557fe;
    }
    .new-date{
        font-weight:600;
        color:grey;
        line-height:40px;
    }
</style>